<template>
  <div class="top-view">
    <NavBar></NavBar>
    <NavBarBottom @goside="Goside"></NavBarBottom>
    <div class="bottom-message">
      <span class="fir-message">Welcome to Ford</span>
      <span class="sec-message">Dream Car</span>
      <button class="add-btn" @click="openitem()">阅 读 更 多</button>
    </div>
  </div>
</template>

<script>
import NavBar from "./navbar.vue";
import NavBarBottom from "./navbarbottom.vue";
export default {
  name: "TopView",
  components: {
    NavBar,
    NavBarBottom,
  },
  methods: {
    openitem() {
      this.$emit("openitem");
    },
    Goside(index) {
      // console.log(index)
      this.$emit("topgoside", index);
    },
  },
};
</script>

<style>
.top-view {
  max-width: 100%;
  max-height: 800px;
  background: url("http://192.168.2.27:8888/assets/img/fort.jpg") no-repeat center
    center;
  background-size: cover;
}
.bottom-message {
  max-width: 600px;
  height: 400px;
  display: flex;
  flex-direction: column;
  /* background-color:red; */
  margin: 150px auto 0;
  /* margin-bottom: 0; */
}
span {
  color: white;
  text-align: center;
}
.fir-message {
  font-size: 50px;
  font-weight: 800;
}
.sec-message {
  width: 32%;
  border-radius: 8px;
  margin: 4rem auto 120px;
  font-size: 30px;
  font-weight: 600;
  font-family:Georgia, 'Times New Roman', Times, serif;
  background-color: rgba(0, 0, 0, 0.6);
}
.add-btn {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid white;
  color: white;
  font-size: 18px;
  font-weight: 500;
  border-radius: 4px;
}
</style>